<template>
    <div class="fitness-report">
      <!-- 头部信息 -->
      <el-card class="header-card">
        <h2>学生体能评估与训练规划报告</h2>
        <div class="student-info">
          <el-tag type="info">姓名：{{ studentData.name }}</el-tag>
          <el-tag type="info">性别：{{ studentData.gender }}</el-tag>
          <el-tag type="info">班级：{{ studentData.class }}</el-tag>
          <el-tag type="info">评估日期：{{ studentData.date }}</el-tag>
        </div>
      </el-card>
  
      <!-- 体测数据概览 -->
      <el-card class="data-card">
        <h3>一、体测数据概览</h3>
        <el-table :data="studentData.tests" stripe border>
          <el-table-column prop="name" label="测试项目" width="180"/>
          <el-table-column prop="value" label="测试值"/>
          <el-table-column prop="standard" label="标准值"/>
          <el-table-column label="达标状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '达标' ? 'success' : 'danger'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="预警等级" width="100">
            <template #default="{ row }">
              <el-icon v-if="row.alert === '✅'" color="#67C23A"><SuccessFilled /></el-icon>
              <el-icon v-if="row.alert === '⚠️'" color="#E6A23C"><WarningFilled /></el-icon>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="summary">
          <el-statistic title="整体达标率" :value="studentData.passRate" suffix="%"/>
          <el-statistic title="预警项目数" :value="studentData.alertCount"/>
        </div>
      </el-card>
  
      <!-- 训练计划 -->
      <el-card class="plan-card">
        <h3>二、个性化训练计划</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in trainingPlan"
            :key="index"
            :timestamp="item.week"
            placement="top"
          >
            <el-card>
              <h4>{{ item.title }}</h4>
              <el-table :data="item.drills" size="small">
                <el-table-column prop="name" label="训练项目"/>
                <el-table-column prop="content" label="训练内容"/>
                <el-table-column prop="intensity" label="强度"/>
                <el-table-column prop="frequency" label="频率"/>
              </el-table>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
  
      <!-- 进度跟踪 -->
      <el-card class="progress-card">
        <h3>三、进度跟踪表</h3>
        <el-table :data="progressData" border>
          <el-table-column 
            v-for="(col, index) in progressColumns"
            :key="index"
            :prop="col.prop"
            :label="col.label"
          />
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import {
    SuccessFilled,
    WarningFilled
  } from '@element-plus/icons-vue'
  
  // 学生数据
  const studentData = ref({
    name: '张三',
    gender: '男',
    class: '九年级二班',
    date: '2024-03-15',
    tests: [
      { name: '50米跑（秒）', value: 8.5, standard: '≤8.2', status: '未达标', alert: '⚠️' },
      { name: '立定跳远（米）', value: 1.8, standard: '≥2.0', status: '未达标', alert: '⚠️' },
      { name: '引体向上（次）', value: 5, standard: '≥10', status: '未达标', alert: '⚠️' },
      { name: '1000米跑', value: '4:30', standard: '≤4:20', status: '未达标', alert: '⚠️' },
      { name: '坐位体前屈（厘米）', value: 15, standard: '≥12', status: '达标', alert: '✅' }
    ],
    passRate: 20,
    alertCount: 4
  })
  
  // 训练计划数据
  const trainingPlan = ref([
    {
      week: "第1周",
      title: "基础能力提升阶段",
      drills: [
        { name: '爆发力训练', content: '蛙跳+深蹲跳', intensity: '3组×15次', frequency: '每周3次' },
        { name: '耐力训练', content: '400米间歇跑', intensity: '5组', frequency: '每周2次' }
      ]
    },
    {
      week: "第2周",
      title: "专项强化阶段",
      drills: [
        { name: '起跑训练', content: '30米冲刺跑', intensity: '4组×6次', frequency: '每周2次' },
        { name: '力量训练', content: '弹力带引体向上', intensity: '4组×8次', frequency: '每周3次' }
      ]
    }
  ])
  
  // 进度跟踪数据
  const progressColumns = [
    { prop: 'week', label: '周次' },
    { prop: 'sprint', label: '50米跑（秒）' },
    { prop: 'jump', label: '立定跳远（米）' },
    { prop: 'pullup', label: '引体向上（次）' }
  ]
  
  const progressData = ref([
    { week: 1, sprint: 8.4, jump: 1.85, pullup: 6 },
    { week: 2, sprint: 8.3, jump: 1.90, pullup: 7 }
  ])
  </script>
  
  <style scoped>
  .fitness-report {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
  }
  
  .header-card {
    margin-bottom: 20px;
  }
  
  .student-info {
    margin-top: 15px;
  }
  
  .student-info .el-tag {
    margin-right: 15px;
  }
  
  .data-card, .plan-card, .progress-card {
    margin-bottom: 25px;
  }
  
  .summary {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 4px;
  }
  
  .el-statistic {
    padding: 0 20px;
  }
  </style>